<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>小K服务后台管理系统</title>
		<meta name="keywords" content="">
		<meta name="description" content="">

		<link rel="shortcut icon" href="../../../static/favicon.ico" th:href="@{/favicon.ico}">

		<link rel="stylesheet" type="text/css" href="../../../static/bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" type="text/css" href="../../../static/plugins/iCheck/custom.css" th:href="@{/plugins/iCheck/custom.css}" />
		<link rel="stylesheet" type="text/css" href="../../../static/plugins/switchery/switchery.css" th:href="@{/plugins/switchery/switchery.css}" />
		<link rel="stylesheet" type="text/css" href="../../../static/plugins/layui/css/layui.css" th:href="@{/plugins/layui/css/layui.css}" />
		<link rel="stylesheet" type="text/css" href="../../../static/web/admin/css/font-awesome.css" th:href="@{/web/admin/css/font-awesome.css}" />
		<link rel="stylesheet" type="text/css" href="../../../static/web/admin/css/animate.css" th:href="@{/web/admin/css/animate.css}" />
		<link rel="stylesheet" type="text/css" href="../../../static/web/admin/css/style.css" th:href="@{/web/admin/css/style.css}" />

	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight" id="body">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>报修单管理 <small>报修单列表</small></h5>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="col-sm-9 m-b-xs">

									<div class="btn-group" id="exampleToolbar" role="group">
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-white dropdown-toggle">分类筛选 <span class="caret"></span>
                                </button>
											<ul class="dropdown-menu">
												<li th:each="classify,status : ${session.classifyList}">
													<a href="javascript:void(0);" th:attrappend="'v-on:click'=${'showClassify('+classify.id+')'}" th:text="${classify.title}">报修分类</a>
												</li>
												<li class="divider"></li>
												<li>
													<a href="javascript:void(0);" class="font-bold" v-on:click="showClassify">显示全部</a>
												</li>
											</ul>
										</div>
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-white dropdown-toggle">状态筛选 <span class="caret"></span>
                                </button>
											<ul class="dropdown-menu">
												<li>
													<a href="javascript:void(0);" v-on:click="showStatus(1)">未处理</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="showStatus(2)">已打印</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="showStatus(3)">已送出</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="showStatus(4)">已完成</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="showStatus(5)">已取消</a>
												</li>
												<li class="divider"></li>
												<li>
													<a href="javascript:void(0);" class="font-bold" v-on:click="showStatus">显示全部</a>
												</li>
											</ul>
										</div>
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-white dropdown-toggle">设置状态 <span class="caret"></span>
                                </button>
											<ul class="dropdown-menu">
												<li>
													<a href="javascript:void(0);" v-on:click="setStatus(1)">未处理</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="setStatus(2)">已打印</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="setStatus(3)">已送出</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="setStatus(4)">已完成</a>
												</li>
												<li class="divider"></li>
												<li>
													<a href="javascript:void(0);" class="font-bold" v-on:click="setStatus(0)">取消处理报修单</a>
												</li>
											</ul>
										</div>
										<div class="btn-group">
											<button data-toggle="dropdown" class="btn btn-white dropdown-toggle">打印选中报修单 <span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li>
													<a href="javascript:void(0);" v-on:click="print(1)">跳转打印</a>
												</li>
												<!--<li>
													<a href="javascript:void(0);" v-on:click="print(2)">导出PDF</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="print(3)">导出HTML</a>
												</li>
												<li>
													<a href="javascript:void(0);" v-on:click="print(4)">导出World</a>
												</li>-->
											</ul>
										</div>
									</div>

								</div>
								<div class="col-sm-3">
									<div class="input-group">
										<input type="text" v-model.trim="pageInfo.search" placeholder="请输入关键词" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"  v-on:click="searchUser"> 搜索</button> </span>
									</div>
								</div>
							</div>
							<div class="">
								<table class="table table-hover table-bordered">
									<thead>
										<tr>
											<th style="width: 50px;">
                                                <input type="checkbox" class="i-checks" v-on:click="select" v-model="selectAll">
                                            </th>
											<th style="width: 70px;">报修人</th>
											<th style="width: 70px;">时间</th>
											<th style="width: 70px;">报修地址</th>
											<th style="width: 100px;">联系电话</th>
                                            <th style="width: 100px;">报修分类</th>
											<th>报修内容</th>
											<th style="width: 60px;">状态</th>
											<th style="width: 120px;">操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(item,index) in list" v-bind:class="{warning:item.status==0}">
											<td>
												<input type="checkbox" v-bind:value="item.id" v-model="item.select" class="i-checks">
											</td>
											<td>{{item.name}}</td>
											<td>{{item.addTime}}</td>
											<td>{{item.room}}</td>
											<td>{{item.phone}}</td>
                                            <td>{{item.classifyName}}</td>
											<td>{{item.content}}</td>
											<td>{{status[item.status]}}</td>
											<td>
												<div class="btn-group" role="group">
													<div class="btn-group">
														<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">设置状态 <span class="caret"></span>
                                </button>
														<ul class="dropdown-menu">
															<li>
																<a href="javascript:void(0);" v-on:click="setStatus(1,item)">未处理</a>
															</li>
															<li>
																<a href="javascript:void(0);" v-on:click="setStatus(2,item)">已打印</a>
															</li>
															<li>
																<a href="javascript:void(0);" v-on:click="setStatus(3,item)">已送出</a>
															</li>
															<li>
																<a href="javascript:void(0);" v-on:click="setStatus(4,item)">已完成</a>
															</li>
															<li class="divider"></li>
															<li>
																<a href="javascript:void(0);" class="font-bold" v-on:click="setStatus(5,item)">取消处理报修单</a>
															</li>
														</ul>
													</div>
												</div>
											</td>
										</tr>
                                        <tr v-if="!list || list.length == 0" style="text-align: center;"><td colspan="9">没有更多内容</td></tr>
									</tbody>
								</table>
							</div>
							<div id="page"></div>
						</div>
					</div>
				</div>

			</div>

		</div>

		<script src="../../../static/plugins/jquery.min.js" th:src="@{/plugins/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../static/web/admin/js/content.js" th:src="@{/web/admin/js/content.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../static/plugins/switchery/switchery.js" th:src="@{/plugins/switchery/switchery.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../static/plugins/peity/jquery.peity.min.js" th:src="@{/plugins/peity/jquery.peity.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../static/plugins/iCheck/icheck.min.js" th:src="@{/plugins/iCheck/icheck.min.js}" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../../../static/web/js/demo/peity-demo.js" th:src="@{/web/js/demo/peity-demo.js}" type="text/javascript" charset="utf-8"></script>-->
		<script src="../../../static/URL.js" th:src="@{/URL.js}"></script>

		<script>
            layui.use(['layer', 'laypage', 'laydate'], function(){
                var layer = layui.layer //获得layer模块
                    ,laypage = layui.laypage //获得laypage模块
                    ,laydate = layui.laydate; //获得laydate模块
                //使用模块
                var app = new Vue({
                    el: '#body',
                    data: {
                        selectAll: false,
                        status:["未知","未处理","已打印","已送出","已完成","已取消"],
                        list: [],
                        pageInfo:{
                            page:1,
                            status:0,
                            classify:0,
                            search: ""
                        }
                    },
                    methods: {
                        searchUser: function() {
                            this.loadPage(1);
                        },
                        print:function(type){
                            console.log(type);
                            var typeName=["","直接打印","导出PDF","导出HTML","导出World","",""];
                            layui.layer.msg("打印选中内容");
                            var data = {id:[],printType:type};
                            var dataStr = "printType="+type;
                            var names = [];
                            var classifyName = "";
                            for(var i in this.list) {
                                var item1 = this.list[i];
                                if(item1.select) {
                                    if(classifyName === "") {
                                        classifyName = item1.classifyName;
                                    }
                                    if (classifyName !== item1.classifyName) {
                                        layui.layer.msg("每次打印只能打印同分类的报修单，无法一次性打印多个分类的报修单！", {time: 20000,btn: ['明白了']});
                                        return false;
                                    }
                                    classifyName = item1.classifyName;
                                    dataStr+="&id[]="+item1.id;
                                    data.id.push(item1.id);
                                    names.push(item1.name);
                                }
                            }
                            if(names.length === 0){layui.layer.msg("没有选择要操作的条目", {time: 20000,btn: ['明白了']});return false;}
                            layui.layer.confirm('您确定要打印以下报修单吗？【' + names.join("、") + '】', {
                                btn: ['确定打印', '取消'] //按钮
                            }, function() {
                                window.open("./repair/print?"+dataStr);
                            });
                        },
                        showClassify:function(classify){
                            console.log(classify);
                            if (typeof classify === "number"){
                                this.pageInfo.classify = classify;
                            }else{
                                this.pageInfo.classify = 0;
                                console.log("显示全部分类");
                            }
                            app.loadPage(1);
                        },
                        showStatus:function(status){
                            console.log(status);
                            if (typeof status === "number"){
                                this.pageInfo.status = status;
                            }else{
                                this.pageInfo.status = 0;
                                console.log("显示全部状态");
                            }
                            app.loadPage(1);
                        },
                        setStatus:function(status,item){
                            var data = {id:[],status:status};
                            var names = [];
                            if (item === undefined){
                                for(var i in this.list) {
                                    var item1 = this.list[i];
                                    if(item1.select) {
                                        data.id.push(item1.id);
                                        names.push(item1.name);
                                    }
                                }
                            }else {
                                data.id.push(item.id);
                                names.push(item.name);
                            }
                            if(names.length === 0){layui.layer.msg("没有选择要操作的条目", {time: 20000,btn: ['明白了']});return false;}
                            layui.layer.confirm('您确定要修改【' + names.join("、") + '】报修单的状态为【'+this.status[data.status]+'】吗？', {
                                btn: ['确定修改', '取消'] //按钮
                            }, function() {
                                $.ajax({
                                    type: "post",
                                    data: data,
                                    url: AjaxUrl.admin.repair.setStatus,
                                    async: true,
                                    dataType: "json",
                                    success: function(data) {
                                        if(data.code === 0){
                                            app.loadPage(1);
                                        }else{
                                            layui.layer.msg(data.msg, {time: 20000,btn: ['明白了']},function(){app.loadPage(1);});
                                        }
                                    },
                                    error: function() {
                                        layui.layer.msg("加载错误");
                                    }
                                });
                            });
                        },
                        select: function() {
                            for(var i = 0; i < this.list.length; i++) {
                                this.list[i].select = this.selectAll
                            }
                        },
                        loadPage: function(page) {
                            if(page === undefined) {
                                // 重新加载当前页面
                            }else if(page * 1 < 1) {
                                this.pageInfo.page=1;
                            }else {
                                this.pageInfo.page=page;
                            }
                            $.ajax({
                                type: "get",
                                data:app.pageInfo,
                                url: AjaxUrl.admin.repair.list,
                                async: true,
                                dataType: "json",
                                success: function(data) {
                                    if (data.code === 0) {
                                        layui.layer.msg(data.msg);
                                        app.list = data.list;
                                        layui.laypage.render({
                                            elem: "page",
                                            count:data.count,
                                            limit:10,
                                            curr: data.pageCurr,
                                            groups: 10,
                                            jump: function(obj, first) {
                                                //得到了当前页，用于向服务端请求对应数据
                                                var curr = obj.curr;
                                                if(!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                                    app.loadPage(curr);
                                                }
                                            }
                                        });
                                    }else {
                                        layui.layer.msg(data.msg, {time: 20000, btn: ['明白了']});
                                    }
                                },
                                error:function () {
                                    layui.layer.msg("加载错误", {time: 5000, btn: ['明白了']});
                                }
                            });
                        }
                    }
                });
                app.loadPage(1);
            });
		</script>
	</body>

</html>